<template>
	<view class="student acea-row row-column">
		<u-navbar :border-bottom="false" title="学员信息" ref="navbar"></u-navbar>
		<view class="part01 acea-row row-column" ref="part01">
			<text class="name">{{info.name}}</text>
			<view class="info acea-row row-middle row-between">
				<text>{{info.status=='1'?'在读学员':'历史学员'}}</text>
				<text>|</text>
				<text>{{info.age}}岁</text>
			</view>
			<image class="avatar" :src="info.headimg?info.headimg:'../../../static/images/noticeDetail-student-default.png'" mode="aspectFill"></image>
		</view>
		<view class="part02 acea-row row-column">
			<view ref="tabs">
				<u-tabs-swiper ref="uTabs" bar-width="32" bar-height="8" active-color="#1661FF" :list="list" :current="current" @change="tabsChange" :bar-style="{borderRadius:'8rpx',background:'linear-gradient(90deg,#1661ff 0%, rgba(22,97,255,0.00) 100%);'}" :is-scroll="false"
				 swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper style="flex: 1;" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<view class="item01 item">
						<view class="title">基础信息</view>
						<view class="info acea-row row-column">
							<view class="info-item acea-row row-middle">
								<text>生日</text>
								<text>{{info.birthdate}}</text>
							</view>
							<view class="info-item acea-row row-middle">
								<text>性别</text>
								<text>{{info.sex==1?'男':'女'}}</text>
							</view>
							<view class="info-item acea-row row-middle">
								<text>联系方式</text>
								<text>{{info.phone}}</text>
							</view>
							<view class="info-item acea-row row-middle" v-for="(item,index) in info.family">
								<text>{{item.qsgx}}</text>
								<text>{{item.name}} {{item.mobile}}</text>
							</view>
							<!-- <view class="info-item acea-row row-middle">
								<text>妈妈</text>
								<text>章子怡的妈妈</text>
							</view>
							<view class="info-item acea-row row-middle">
								<text>联系方式</text>
								<text>15879033477</text>
							</view>
							<view class="info-item acea-row">
								<text>家庭住址</text>
								<text>江西省南昌市学府大道899号慧谷创意产业园B座4楼</text>
							</view> -->
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view class="scrollY" scroll-y>
						<view v-if="kecheng.length != 0">
							<view class="item01 item" v-for="(item,index) in kecheng" :key="index">
								<view class="title">{{item.name}}</view>
								<view class="info acea-row row-column">
									<view class="info-item acea-row row-middle">
										<text>班级</text>
										<text>{{item.bj_name}}</text>
									</view>
									<view class="info-item acea-row row-middle">
										<text>剩余课时</text>
										<text>{{item.left_lession.left_lession}}</text>
									</view>
									<view class="info-item acea-row row-middle">
										<text>剩余天数</text>
										<text>{{item.left_lession.left_day}}</text>
									</view>
								</view>
							</view>	
						</view>
						<u-empty text="暂无课程" mode="list" v-else style="width: 120rpx;height: 180rpx;display: block;margin: 32rpx auto 0;overflow: hidden;"></u-empty>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import request from '../../../api/request.js'
	const app = getApp()
	export default{
		data(){
			return{
				id:'',
				info:{},
				kecheng:[],
				list: [{
					name: '学生信息'
				}, {
					name: '报读课程'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.init()
		},
		mounted() {
			// console.log(this.$refs.navbar,this.$refs)
		},
		methods:{
			init(){
				this.getDetail()
				this.getKecheng()
			},
			getDetail(){
				let data = {
					id:this.id
				}
				request.go((e)=>{
					e.data.headimg = app.globalData.baseUrl + e.data.headimg
					this.info = e.data
				},'/student/view',data,'POST')
			},
			getKecheng(){
				let data = {
					id:this.id
				}
				request.go((e)=>{
					this.kecheng = e.data
				},'/student/kecheng',data,'POST')
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				// console.log(dx);
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
		}	
	}
</script>

<style scoped>
	.student{
		min-height: 100vh;
		background-color: #F7F8FA;
	}
	.student .part01{
		padding: 64rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		position: relative;
	}
	.student .part01 .name{
		font-size: 40rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 56rpx;
		margin-bottom: 16rpx;
	}
	.student .part01 .info{
		width: 204rpx;
		font-size: 26rpx;
		color: #777c84;
	}
	.student .part01 .info text:nth-child(2){
		margin-top: -5rpx;
	}
	.student .part01 .avatar{
		position: absolute;
		top: 64rpx;
		right: 64rpx;
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}
	.student .part02{
		flex: 1;
		flex-wrap: nowrap;
	}
	.student .part02 .scrollY{
		height: 100%;
	}
	.student .part02 .item{
		width: 686rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin: 32rpx auto 0;
		padding: 32rpx;
		box-sizing: border-box;
	}
	.student .part02 .item:last-of-type{
		margin-bottom: 32rpx;
	}
	.student .part02 .item01 .title{
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid #ebedf0;
		text-align: left;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 700;
		color: #1f2329;
		line-height: 44rpx;
	}
	.student .part02 .item01 .info .info-item{
		margin-top: 24rpx;
		flex-wrap: nowrap;
	}
	.student .part02 .item01 .info .info-item text:nth-child(1){
		width: 112rpx;
		white-space: nowrap;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #646a73;
		line-height: 40rpx;
		margin-right: 48rpx;
		display: block;
	}
	.student .part02 .item01 .info .info-item text:nth-child(2){
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #1f2329;
		line-height: 40rpx;
		display: block;
		flex: 1;
	}
</style>
